<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="tou">
			<u-icon name="arrow-left" size="50" @click='onfanhui'></u-icon>
			<view class="txt">
				排行榜
			</view>
		</view>
		<!-- #endif -->
		<u-subsection :list="list" :current="curNow" @change="sectionChange" activeColor="#fff" inactiveColor="#33cc66"
			:bold="true" bgColor="#fff"></u-subsection>
		<ul>
			<li v-for="(item,index) in rankList" :key="index">
				<view class="left">
					<view class="num">{{index+1<10?`0${index+1}`:index+1}}</view>
					<image :src="item.url"></image>
					<view class="box">
						<view class="text">
							{{item.text}}
						</view>
						<view class="kcal">
							<span>{{item.kcal}}Kcal</span>
							<span class="center">/</span>
							<span>{{item.num}}</span>
						</view>
					</view>
				</view>
				<view class="right">
					<u-button :type="item.type" size="mini"></u-button>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['减 脂', '营 养', '美 容'],
				curNow: 0,
				num: [],
				rankList: [],
				rankList0: [{
					text: '苹果',
					url: 'https://img1.baidu.com/it/u=3773660220,1385453416&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 60,
					num: '120g',
					type: 'success'
				}, {
					text: '茄子',
					url: 'https://img2.baidu.com/it/u=1413043114,3783042136&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 21,
					num: '93g',
					type: 'success'
				}, {
					text: '洋葱',
					url: 'https://img0.baidu.com/it/u=1859321702,1454729685&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 39,
					num: '90g',
					type: 'success'
				}, {
					text: '香菇',
					url: 'https://img2.baidu.com/it/u=3982947775,3787046276&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 20,
					num: '1杯70g',
					type: 'success'
				}, {
					text: '豆芽',
					url: 'https://img1.baidu.com/it/u=3057271840,857836956&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 35,
					num: '1杯125g',
					type: 'success'
				}, {
					text: '番茄',
					url: 'https://img0.baidu.com/it/u=1325491778,541838146&fm=253&fmt=auto&app=120&f=JPEG?',
					kcal: 25,
					num: '1个135g',
					type: 'success'
				}, {
					text: '芹菜',
					url: 'https://img0.baidu.com/it/u=1581842810,1447752609&fm=253&fmt=auto&app=120&f=JPEG?',
					kcal: 20,
					num: '67g',
					type: 'success'
				}, {
					text: '海带',
					url: 'https://img2.baidu.com/it/u=1323837521,3820760713&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 17,
					num: '100g',
					type: 'success'
				}, {
					text: '草莓',
					url: 'https://img2.baidu.com/it/u=937281799,4236591175&fm=253&fmt=auto&app=120&f=JPEG?',
					kcal: 30,
					num: '5颗85g',
					type: 'success'
				}, {
					text: '雪梨',
					url: 'https://img2.baidu.com/it/u=1418368565,3410686264&fm=253&fmt=auto&app=120&f=JPEG?',
					kcal: 45,
					num: '1个',
					type: 'success'
				}],
				rankList1: [{
					text: '鱼肉',
					url: 'https://img1.baidu.com/it/u=1480682843,2872648921&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 75,
					num: '50g',
					type: 'success'
				}, {
					text: '紫菜',
					url: 'https://img2.baidu.com/it/u=2031226974,3780849348&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 207,
					num: '100g',
					type: 'success'
				}, {
					text: '黑巧克力',
					url: 'https://img0.baidu.com/it/u=3053685588,1751457862&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 516,
					num: '100g',
					type: 'error'
				}, {
					text: '山药',
					url: 'https://img0.baidu.com/it/u=930207688,429252858&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 56,
					num: '83g',
					type: 'success'
				}, {
					text: '西蓝花',
					url: 'https://img1.baidu.com/it/u=2706587689,3569506808&fm=253&fmt=auto&app=120&f=JPEG?',
					kcal: 33,
					num: '83g',
					type: 'success'
				}, {
					text: '草虾',
					url: 'https://img0.baidu.com/it/u=1579005767,1262771089&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 55,
					num: '30g',
					type: 'success'
				}, {
					text: '菠菜',
					url: 'https://img0.baidu.com/it/u=1747918374,607701831&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 40,
					num: '1杯180g',
					type: 'success'
				}, {
					text: '大蒜',
					url: 'https://img1.baidu.com/it/u=2230664108,2533871694&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 126,
					num: '85g',
					type: 'success'
				}, {
					text: '酸奶',
					url: 'https://img2.baidu.com/it/u=1702394266,2783959484&fm=253&fmt=auto&app=120&f=JPEG?',
					kcal: 72,
					num: '100g',
					type: 'success'
				}, {
					text: '燕麦',
					url: 'https://img0.baidu.com/it/u=1891509701,3731068237&fm=253&fmt=auto&app=120&f=JPEG?',
					kcal: 367,
					num: '1碗100g',
					type: 'success'
				}],
				rankList2: [{
					text: '柠檬',
					url: 'https://img2.baidu.com/it/u=3992391822,2916305689&fm=253&fmt=auto&app=120&f=JPEG?',
					kcal: 37,
					num: '100g',
					type: 'success'
				}, {
					text: '葡萄',
					url: 'https://img2.baidu.com/it/u=3502126033,3490522200&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 170,
					num: '350g',
					type: 'success'
				}, {
					text: '樱桃',
					url: 'https://img2.baidu.com/it/u=1666471131,1784965884&fm=253&fmt=auto&app=120&f=JPEG?',
					kcal: 50,
					num: '20粒100g',
					type: 'success'
				}, {
					text: '草莓',
					url: 'https://img2.baidu.com/it/u=937281799,4236591175&fm=253&fmt=auto&app=120&f=JPEG?',
					kcal: 30,
					num: '5颗85g',
					type: 'success'
				}, {
					text: '苹果',
					url: 'https://img1.baidu.com/it/u=3773660220,1385453416&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 60,
					num: '120g',
					type: 'success'
				}, {
					text: '雪梨',
					url: 'https://img2.baidu.com/it/u=1418368565,3410686264&fm=253&fmt=auto&app=120&f=JPEG?',
					kcal: 45,
					num: '1个',
					type: 'success'
				}, {
					text: '橘子',
					url: 'https://img1.baidu.com/it/u=3568769195,826288838&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 65,
					num: '200g',
					type: 'success'
				}, {
					text: '香蕉',
					url: 'https://img0.baidu.com/it/u=3130349898,4086493786&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 93,
					num: '100g',
					type: 'success'
				}, {
					text: '西瓜',
					url: 'https://img1.baidu.com/it/u=1268278160,4118537825&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 40,
					num: '1片240g',
					type: 'success'
				}, {
					text: '甘蔗',
					url: 'https://img0.baidu.com/it/u=3825718981,1877087514&fm=253&fmt=auto&app=138&f=JPEG?',
					kcal: 60,
					num: '130g',
					type: 'success'
				}]
			};
		},
		onShow() {
			// 页面刚进入展示主食类列表
			this.rankList.push(...this.rankList0)
		},
		methods: {
			// 点击返回
			onfanhui() {
				uni.navigateBack()
			},
			sectionChange(index) {
				this.curNow = index;
				if (index == 0) {
					this.rankList = []
					this.rankList.push(...this.rankList0)
				} else if (index == 1) {
					this.rankList = []
					this.rankList.push(...this.rankList1)
				} else if (index == 2) {
					this.rankList = []
					this.rankList.push(...this.rankList2)
				} else {
					this.rankList = [{
						text: '暂无相关食物',
						kcal: 0,
						num: '100g',
					}]
				}
			},
		}
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
	}

	.tou {
		width: 100%;
		height: 50px;
		background-color: white;
		display: flex;
		align-items: center;
		position: relative;

		.txt {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			// margin-left: 125px;
		}
	}

	/deep/.u-subsection--button {
		height: 80rpx;
	}

	/deep/.u-subsection__item__text {
		font-size: 36rpx !important;
	}

	/deep/.u-subsection__bar {
		height: 65rpx !important;
	}

	/deep/.u-subsection--button__bar {
		background-color: #33cc66 !important;
	}

	ul {
		width: 100%;
		margin-bottom: 100rpx;

		li {
			list-style: none;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #efefef;
			padding: 40rpx 0;
			margin: 0 30rpx;

			.left {
				display: flex;
				align-items: center;

				.num {
					margin-right: 30rpx;
				}

				image {
					width: 150rpx;
					height: 100rpx;
					padding-right: 20rpx;
				}

				.center {
					padding: 0 10rpx;
					color: #757575;
				}

				.text {
					margin-bottom: 10rpx;
				}
			}

			.right {
				margin-right: 30rpx;
				width: 50rpx;
				height: 44rpx;
				border-radius: 8rpx;
				overflow: hidden;
			}
		}
	}

	/deep/uni-button:after {
		width: 100%;
		border: none;
	}

	/deep/.u-button--info {
		border: none;
	}
</style>
